<template>
  <div>
    <h1>App</h1>
    <p>a:{{ count }}</p>
    <button @click="addCount">addCount</button>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'App',
});
</script>

<script setup lang="ts">
/* 
  使用ref方法来创建响应式数据：
    - 接收一个内部值，返回一个响应式的、可更改的 ref 对象
    - 此对象只有一个指向其内部值的属性 .value
    - 它是响应式的，即所有对 .value 的操作都将被追踪
*/
const count = ref(1);
console.log(count);
const addCount = () => {
  count.value++;
};
</script>
<style></style>
